<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>树形demo</title>
    <link rel="stylesheet" href="css/logistics.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="js/vue.js"></script>
    <style>
    .center-content {
        width: 80%;
        height: auto;
        margin: 10% 5% 0 15%;
    }
    </style>
</head>
<!-- item template -->
<template id="item-template">
    <li class="tree-style">
        <div :class="[{'tree-active':this.model.id==this.$root.active}]" @click="toggle" @dblclick="changeType">
            <!-- 是不是文件夹 -->
            <template v-if="isFolder">
                <!-- 是不是已展开 -->
                <span v-if="!open">
                 <i class="fa fa-caret-right"></i><i class="fa fa-folder-o"></i>
                </span>
                <span v-else>
                  <i class="fa fa-caret-down"></i><i class="fa fa-folder-open-o"></i>
             </span>
            </template>
            <template v-else>
                <span>
                 <i></i><i class="fa fa-file-text-o"></i>
                </span>
            </template>
            <!-- 显示的节点名称 -->
            <span v-text="model.text"></span>
        </div>
        <ul v-show="open" v-if="isFolder">
            <item v-for="model in model.children" :model="model">
            </item>
            <!-- <li class="add" @click="addChild">+</li> -->
        </ul>
    </li>
</template>

<body>
    <div class="all-content" id="qiein-app">
        <p>(杭州金夫人.)</p>
        <!-- the demo root element -->
        <div class="tree-wrap">
            <ul id="demo">
                <item class="" :model="treeData">
                </item>
            </ul>
        </div>
        <!-- 内容结束 -->
    </div>
    <div id="sele">
        <v-select :select="select"></v-select>
    </div>
</body>
<template id="v-select">
    <select name="" id="">
        <option :value="opt.val" v-for="opt in select.opts">{{select.text}}</option>
    </select>
</template>
<script>
Vue.component('v-select', {
    template: '#v-select',
    props: {
        // active: 1,
        // opts: Object
    }
});
var select = {
    text:123,
    opts: [{
        val: 1
    }, {
        val: 2
    }, {
        val: 3
    }]
};

var a = new Vue({
    el: '#sele',
    data: {
        select: select
    }
});
// demo data
var data = {
    id: '1', //对应ID
    name: '', //对应name
    text: '杭州金夫人总库房', //展示
    value: '32',
    children: [{
        id: '2',
        name: '',
        text: '库房1',
        value: '32',
        children: [{
            id: '3',
            name: '',
            text: '货架1',
            value: '32'
        }, {
            id: '4',
            name: '',
            text: '货架2',
            value: '32'
        }]
    }, {
        id: '5',
        name: '',
        text: '库房2',
        value: '32',
        children: [{
            id: '6',
            name: '',
            text: '货架1',
            value: '32'
        }, {
            id: '7',
            name: '',
            text: '货架2',
            value: '32'
        }]
    }]
}

// define the item component
Vue.component('item', {
    template: '#item-template',
    props: {
        active: 1,
        model: Object
    },
    data: function() {
        return {
            open: false
        }
    },
    computed: {
        isFolder: function() {
            return this.model.children &&
                this.model.children.length
        }
    },
    methods: {
        //展开事件
        toggle: function() {
            if (this.isFolder) {
                this.open = !this.open
            }
            this.$root.active = this.model.id;
            //console.log(this.$root.active);
        },
        //改变当前元素类型
        changeType: function() {
            if (!this.isFolder) {
                Vue.set(this.model, 'children', [])
                this.addChild()
                this.open = true
            }
        },
        //添加子元素
        addChild: function() {
            this.model.children.push({
                id: Math.random(1),
                text: '新仓库'
            })
        }
    }
})

// boot up the demo
var demo = new Vue({
    el: '#qiein-app',
    data: {
        treeData: data,
        active: 1
    }
})
</script>

</html>
